<!-- 搜索记录 -->
<template>
  <el-container>
    <el-main>
      <!-- 搜索 -->
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="类型">
            <el-input v-model="formInline.type" placeholder="请输入搜索类型" />
          </el-form-item>

          <el-form-item label="搜索词">
            <el-input
              v-model="formInline.searchvalue"
              placeholder="请输入搜索词"
            />
          </el-form-item>

          <el-form-item label="搜索量">
            <el-input
              v-model="formInline.searchvolume"
              placeholder="请输入搜索量"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card>
        <!-- 表格 -->
        <el-button v-if="multipleSelection.length" @click="delAll">
          批量删除
        </el-button>

        <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />

          <el-table-column prop="searchvalue" label="搜索词" />

          <el-table-column prop="searchvolume" label="搜索量">
            <template #default="scope">
              <div class="searchvolume-box">
                <span>{{ scope.row.searchvolume }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="createtime" label="搜索时间" />

          <el-table-column label="操作" width="300" fixed="right">
            <template #default="scope">
              <div class="btn-box">
                <el-popconfirm
                  title="确认删除这条搜索记录?"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="delItem(scope.row.id)"
                >
                  <template #reference>
                    <el-button type="text"> 删除 </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        >
        </el-pagination>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { apiSearch, apiDelSearch } from "@/api/search";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

/**************************************************/

const list = ref([]);

const page = ref({
  current: 1,
  size: 10,
});

const total = ref(0);

const formInline = ref({});

const multipleSelection = ref([]);

/**************************************************/

// 重置
const reset = () => {
  formInline.value = {};

  getList();
};

// 切换分页
const currentChange = (pageIndex) => {
  page.value.current = pageIndex;

  getList();
};

// 删除
const delItem = (id) => {
  apiDelSearch({ id }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 全部删除
const delAll = () => {
  apiDelSearch(multipleSelection.value).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

/**************************************************/

const getList = () => {
  apiSearch({ ...page.value, ...formInline.value }).then((res) => {
    list.value = res.data;

    total.value = res.total;
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss"></style>
